<template>
  <!-- 漏斗分析保存 -->
  <div id="preserVation">
    <!-- 弹框 -->
    <div class="icon2">
      <el-button
        type="primary"
        icon="el-icon-tickets ticket"
        class="sea rch2"
        @click="saves"
        >保存
      </el-button>
    </div>

    <el-dialog
      title
      :visible.sync="dialogFormVisible"
      append-to-body
      style="width: 1400px;margin: 0 auto;border-radius: 2px"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="tabs"
        style="width: 650px;height: 350px"
      >
        <!--        更新当前书签-->
        <el-tab-pane label="更新当前书签" name="updatemark" v-if="bookmarkId">
          <el-form
            ref="form"
            :model="updatemark"
            label-width="80px"
            style="margin-bottom: 50px"
          >
            <!-- 名称 -->
            <el-form-item
              label="名称"
              style="margin-left: -28px;margin-top: 20px"
            >
              <el-input
                v-model="updatemark.name"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>

            <!-- 备注 -->
            <el-form-item label="备注" style="margin-left: -26px">
              <el-input
                type="textarea"
                v-model="updatemark.remark"
                placeholder="可输入备注信息"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 添加到概览 -->
        <el-tab-pane label="添加到概览" name="overview">
          <!-- 概览类型 -->
          <el-form ref="form" :model="overView" label-width="80px">
            <el-form-item label="概览类型" class="over first">
              <el-radio-group
                v-model="overView.resource"
                style="margin-left: 50px"
              >
                <el-radio :label="0">我的概览</el-radio>
              </el-radio-group>
            </el-form-item>
            <div
              class="myoverview"
              style="margin: -25px 0 20px 130px;font-size: 12px;
      line-height: 18px;
      color: #8492a6;"
            >
              我的概览仅支持本人查看，可以分享给其他人查看，同时会生成一个当前查询条件的书签保存在书签列表中
            </div>

            <!-- 名称 -->
            <el-form-item
              label="名称"
              class="name first"
              style="margin-left: -28px"
            >
              <el-input
                v-model="overView.name"
                style="margin-left: 80px;width: 400px"
                >搜索结果转化为漏斗</el-input
              >
            </el-form-item>

            <!-- 选择概览 -->
            <el-form-item label="选择概览" class="select first">
              <el-select
                v-model="overView.select"
                placeholder="请选择活动区域"
                style="margin-left: 53px;width: 400px"
              >
                <el-option
                  :label="item.cname"
                  :value="item.id"
                  v-for="item in choose"
                  :key="item.id"
                  >{{ item.cname }}</el-option
                >
              </el-select>
            </el-form-item>

            <!-- 备注 -->
            <el-form-item
              label="备注"
              class="mark first"
              style="margin-left: -26px"
            >
              <el-input
                type="textarea"
                v-model="overView.remark"
                placeholder="可输入备注信息"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 保存为书签 -->
        <el-tab-pane label="保存为书签" name="bookmark">
          <el-form ref="form" :model="bookMark" label-width="80px">
            <!--            书签类型-->
            <el-form-item label="书签类型">
              <el-radio-group v-model="bookMark.type" style="margin-left: 50px">
                <el-radio :label="1">我的书签</el-radio>
              </el-radio-group>
            </el-form-item>
            <div
              class="mybookemark"
              style="margin: -25px 0 20px 130px;font-size: 12px;
      line-height: 18px;
      color: #8492a6;"
            >
              我的书签可以在书签页面查看，支持添加到我的概览中，不支持添加到公共概览
            </div>

            <!-- 名称 -->
            <el-form-item label="名称" style="margin-left: -28px">
              <el-input
                v-model="bookMark.name"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>

            <!-- 备注 -->
            <el-form-item label="备注" style="margin-left: -26px">
              <el-input
                type="textarea"
                v-model="bookMark.remark"
                placeholder="可输入备注信息"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { thinglList,bookmarkCreate, bookmarkDetail } from "./api.config";

export default {
  name: "preserVation",
  props: ["bookmarkId","obj"],
  data() {
    return {
      show: false,
      dialogFormVisible: false,
      activeName: "bookmark",
      overView: {
        //添加到概览
        resource: 0,
        name: "搜索结果转化为漏斗",
        select: "",
        remark: ""
      },
      updatemark: {
        //更新当前书签
        name: "",
        remark: ""
      },
      bookMark: {
        //保存为书签
        type: 1,
        name: "搜索结果转化为漏斗",
        remark: ""
      },
      form: {
        delivery: false
      },
      formLabelWidth: "120px",
      choose: []
    };
  },
  components: {},
  created() {
    this.getOverview();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //获取选择概览
    getOverview() {
      thinglList().then(res => {
        // 返回状态码如果不是 200，说明数据异常，需弹窗提示
        if (res.data.code !== 200) {
          this.$alert(res.data.msg, '提示', { type: 'warning'});
          return;
        }

        this.choose = res.data.data.rows;
      });
    },
    //获得分享书签详情
    getDetail() {
      bookmarkDetail({}, this.bookmarkId).then(res => {
        console.log(res);

        // 返回状态码如果不是 200，说明数据异常，需弹窗提示
        if (res.data.code !== 200) {
          this.$alert(res.data.msg, '提示', { type: 'warning'});
          return;
        }
      });
    },
    saves(){
      this.dialogFormVisible=true;
      this.$emit("format")
    },

    save() {
      var arr = [];
      if(this.overView.select){
        arr.push(this.overView.select)
      };
      // var fromDate = [
      //   this.winPeriod[0] = this.getBeforeDate(7 - 1),
      //   this.winPeriod[1] = this.getBeforeDate()
      // ];
      // var by_field_steps = [];
      // var byFields = this.viewFunnelTypes.arr_check;
      // var conditions = {
      //   field: this.arrSetting[i],
      //   function: this.equal,
      //
      // };
      // var ilter_field_steps;
      // var objData = {
      //   fromDate: fromDate,
      //   funnelId: 5444,
      //   by_field_steps: by_field_steps,
      //   bookmarkid: 57789,
      //   byFields: byFields,
      //   bucketParams: {},
      //   conditions: conditions
      // };
      // 分享书签新建
      bookmarkCreate({
        name: this.overView.name,
        dashboardIds: arr,
        bookmark: this.bookMark.remark,
        data: JSON.stringify(this.obj),
        config: "{}",
        type: "segmentation",
        mode: 0
      }).then(res => {
        console.log(res);

        // 返回状态码如果不是 200，说明数据异常，需弹窗提示
        if (res.data.code !== 200) {
          this.$alert(res.data.msg, '提示', { type: 'warning'});
          return;
        }

        this.dialogFormVisible = false;
      });
      // bookmarkUpdate({id:''}).then(res => {
      //   console.log(res.data.data)
      // })
    }
  },
  mounted() {
    console.log(this.bookmarkId);
    this.getDetail();
  }
};
</script>

<style lang="scss" scoped>
#preserVation {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.icon2 {
  position: relative;
  display: flex;
  float: left;
  left: -7px;
  top: 20px;

  .sea {
    margin-top: -55px;
    background: none;
    border: none;
    font-size: 14px;
    color: #559ff0;
    cursor: pointer;
  }

  .tabs {
    margin-top: -30px;
  }
}
</style>

<style scoped>
#preserVation {
  width: 100%;
  height: 100%;
  position: relative;
}

/deep/ .el-dialog__header {
  padding-bottom: 0;
  padding: 0;
}</style
>>
